<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Script-Type" content="text/css" />

<title>修改配方</title>
<script src="../css/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

function deleteRow()
{
//加代码..
}

function addRow()
{
//加代码..
}

function setTableText(myElement)
{
//	prompt("what's your name","enter your userName");
	document.getElementById("idtab001").innerHTML = myElement.innerHTML;

//	alert(myElem.parentNode.className.innerHTML);
}

function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
}
}
}
window.onload=menuFix;


/* 

Tablecloth 
written by Alen Grakalic, provided by Css Globe (cssglobe.com)
please visit http://cssglobe.com/lab/tablecloth/

*/

this.tablecloth = function(){

// CONFIG 

// if set to true then mouseover a table cell will highlight entire column (except sibling headings)
var highlightCols = true;

// if set to true then mouseover a table cell will highlight entire row	(except sibling headings)
var highlightRows = false;	

// if set to true then click on a table sell will select row or column based on config
var selectable = true;

// this function is called when 
// add your own code if you want to add action 
// function receives object that has been clicked 
this.clickAction = function(obj)
{
	//alert(obj.innerHTML);
	
};

// END CONFIG (do not edit below this line)
var tableover = false;
this.start = function(){
	var tables = document.getElementsByTagName("table");
	for (var i=0;i<tables.length;i++){
		tables[i].onmouseover = function(){tableover = true;};
		tables[i].onmouseout = function(){tableover = false;};			
		rows(tables[i]);
	};
};

this.rows = function(table){
	var css = "";
	var tr = table.getElementsByTagName("tr");
	for (var i=0;i<tr.length;i++){
		css = (css == "odd") ? "even" : "odd";
		tr[i].className = css;
		var arr = new Array();
		for(var j=0;j<tr[i].childNodes.length;j++){				
			if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
		};		
		for (var j=0;j<arr.length;j++){				
			arr[j].row = i;
			arr[j].col = j;
			if(arr[j].innerHTML == "&nbsp;" || arr[j].innerHTML == "") arr[j].className += " empty";					
			arr[j].css = arr[j].className;
			arr[j].onmouseover = function(){
				over(table,this,this.row,this.col);
			};
			arr[j].onmouseout = function(){
				out(table,this,this.row,this.col);
			};
			arr[j].onmousedown = function(){
				down(table,this,this.row,this.col);
			};
			arr[j].onmouseup = function(){
				up(table,this,this.row,this.col);
			};				
			arr[j].onclick = function(){
				click(table,this,this.row,this.col);
			};								
		};
	};
};

// appyling mouseover state for objects (th or td)
this.over = function(table,obj,row,col){
	if (!highlightCols && !highlightRows) obj.className = obj.css + " over";  
	if(check1(obj,col)){
		if(highlightCols) highlightCol(table,obj,col);
		if(highlightRows) highlightRow(table,obj,row);		
	};
};
// appyling mouseout state for objects (th or td)	
this.out = function(table,obj,row,col){
	if (!highlightCols && !highlightRows) obj.className = obj.css; 
	unhighlightCol(table,col);
	unhighlightRow(table,row);
};
// appyling mousedown state for objects (th or td)	
this.down = function(table,obj,row,col){
	obj.className = obj.css + " down";  
};
// appyling mouseup state for objects (th or td)	
this.up = function(table,obj,row,col){
	obj.className = obj.css + " over";  
};	
// onclick event for objects (th or td)	
this.click = function(table,obj,row,col){
	if(check1){
		if(selectable) {
			unselect(table);	
			if(highlightCols) highlightCol(table,obj,col,true);
			if(highlightRows) highlightRow(table,obj,row,true);
			document.onclick = unselectAll;
		}
	};
	clickAction(obj); 		
};		

this.highlightCol = function(table,active,col,sel){
	var css = (typeof(sel) != "undefined") ? "selected" : "over";
	var tr = table.getElementsByTagName("tr");
	for (var i=0;i<tr.length;i++){	
		var arr = new Array();
		for(j=0;j<tr[i].childNodes.length;j++){				
			if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
		};							
		var obj = arr[col];
		if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css; 		
	};
};
this.unhighlightCol = function(table,col){
	var tr = table.getElementsByTagName("tr");
	for (var i=0;i<tr.length;i++){
		var arr = new Array();
		for(j=0;j<tr[i].childNodes.length;j++){				
			if(tr[i].childNodes[j].nodeType == 1) arr.push(tr[i].childNodes[j]);
		};				
		var obj = arr[col];
		if(check3(obj)) obj.className = obj.css; 
	};
};	
this.highlightRow = function(table,active,row,sel){
	var css = (typeof(sel) != "undefined") ? "selected" : "over";
	var tr = table.getElementsByTagName("tr")[row];		
	for (var i=0;i<tr.childNodes.length;i++){		
		var obj = tr.childNodes[i];
		if (check2(active,obj) && check3(obj)) obj.className = obj.css + " " + css; 		
	};
};
this.unhighlightRow = function(table,row){
	var tr = table.getElementsByTagName("tr")[row];		
	for (var i=0;i<tr.childNodes.length;i++){
		var obj = tr.childNodes[i];			
		if(check3(obj)) obj.className = obj.css; 			
	};
};
this.unselect = function(table){
	tr = table.getElementsByTagName("tr");
	for (var i=0;i<tr.length;i++){
		for (var j=0;j<tr[i].childNodes.length;j++){
			var obj = tr[i].childNodes[j];	
			if(obj.className) obj.className = obj.className.replace("selected","");
		};
	};
};
this.unselectAll = function(){
	if(!tableover){
		tables = document.getElementsByTagName("table");
		for (var i=0;i<tables.length;i++){
			unselect(tables[i]);
		};		
	};
};	
this.check1 = function(obj,col){
	return (!(col == 0 && obj.className.indexOf("empty") != -1));
};
this.check2 = function(active,obj){
	return (!(active.tagName == "TH" && obj.tagName == "TH")); 
};
this.check3 = function(obj){
	return (obj.className) ? (obj.className.indexOf("selected") == -1) : true; 
};	

start();

};

/* script initiates on page load. */
window.onload = tablecloth;
</script>

<script type="text/javascript" src="../css/jquery-1.4.2.min.js"></script>

 	<script language="javascript">  
/*			$(document).ready(function()
			{
				//$("tbody td:even")得到表格左边的单元格。:even表示：匹配所有索引值为偶数的元素，从 0 开始计数
				//$("tbody tr:even").css("background-color","#ECE9D8");//改变偶数单元格背景颜色。
				
				var numId = $("#idtd001 , #idtd002 , #idtd003 , #idtd004 , #idtd005 , #idtd006 , #idtd007 , #idtd008 ,#idtd009");
				//所有的得到表格左边的单元格都注册了点击事件


//				var numId = $(this).find("td").filter(function(index) {  
//                  return index > -1;  
//              	})
              	//得到第一行的单元格。
              	
				numId.click(function()
				{
					var tdObj = $(this);//获得当前td单元格对象
					//当前文本框里是否有input对象，children()表示：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
					if(tdObj.children("input").length>0){
						return false;
					}
					var inputObj = $("<input type='text'>");//创建文本对象封装成JQuery对象
					//html()：取得第一个匹配元素的html内容
					var text = tdObj.html();
					inputObj.val(text);//将单元格里面的内容赋值到创建的文本对象
					tdObj.html("");//将当前td单元格内容清空
					inputObj.width(tdObj.width());//设置文本框对象的宽度与单元格的宽度相同
					inputObj.css("border-width","0");//设置文本框的边框
					inputObj.css("font-size","16px");//设置文本框字体与单元格中的字体大小一样
					//设置文本框的背景色与单元格的背景色相同 
					inputObj.css("background-color",tdObj.css("background-color"));					
					inputObj.appendTo(tdObj);//将文本框追加到单元格中
					//inputObj是JQuery对象,get(0)获到的就是一个DOM对象即文本框（非JQuery对象）
					//inputObj.get(0).select();
					//trigger()：在每一个匹配的元素上触发某类事件。先触发focus后触发select事件
					inputObj.trigger("focus").trigger("select");
					//文本框的单击事件
					inputObj.click(function(){
						return false;
					});
					//处理文本框上的Enter和ESC事件
					inputObj.keyup(function(event){
						//获得当前所按下的键盘的键值
						var keyCode = event.which;
						if(keyCode == 13){//Enter
							var inputObjText = $(this).val();
							tdObj.html(inputObjText);
							tdObj.remove("input");
						}else if(keyCode == 27){//Esc
							tdObj.html(text);
							tdObj.remove("input");
						}
					});
				});
			});*/
		</script>

<style type = "text/css">
<!--

*{margin:0;padding:0;border:0;}


#nav {line-height: 24px; list-style-type: none; background:#666;}

#nav a {display: block; width: 80px; text-align:center;}

#nav a:link {color:#666; text-decoration:none;}
#nav a:visited {color:#666;text-decoration:none;}
#nav a:hover {color:#FFF;text-decoration:none;font-weight:bold;}

#nav li {float: left; width: 80px; background:#CCC;}
#nav li a:hover{ background:#999;}
#nav li ul {line-height: 27px; list-style-type: none;text-align:left;left: -999em; width: 180px; position: absolute;}
#nav li ul li{float: left; width: 180px;background:#EFEFEF;}


#nav li ul a{display: block; width: 156px;text-align:left;padding-left:24px; overflow:hidden;}

#nav li ul a:link {color:#666; text-decoration:none;}
#nav li ul a:visited {color:#666;text-decoration:none;}
#nav li ul a:hover {color:#F3F3F3;text-decoration:none;font-weight:normal;background:#C00;}

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}

  #view1{
  width:900px;
  height:600px;
  background-color:#00CCFF;
  }
  
table, td{
	font:100% Arial, Helvetica, sans-serif; 
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:left;padding:.5em;border:1px solid #fff;}
th{background:#328aa4 url(tr_back.gif) repeat-x;color:#fff;}
td{background:#e5f1f4;}

th.title{background:#ffff55;color:blue;}

/* tablecloth styles */

tr.even td{background:#e5f1f4;}
tr.odd td{background:#f8fbfc;}

th.over, tr.even th.over, tr.odd th.over{background:#4a98af;}
th.down, tr.even th.down, tr.odd th.down{background:#bce774;}
th.selected, tr.even th.selected, tr.odd th.selected{}

td.over, tr.even td.over, tr.odd td.over{background:#ecfbd4;}
td.down, tr.even td.down, tr.odd td.down{background:#bce774;color:#fff;}
td.selected, tr.even td.selected, tr.odd td.selected{background:#bce774;color:#555;}

/* use this if you want to apply different styleing to empty table cells*/
td.empty, tr.odd td.empty, tr.even td.empty{background:#fff;}
  
-->

a.gb{color:#11c !important}
	.oneColFixCtrHdr #header {
	background: #DDDDDD; 
	padding: 0 10px 0 20px;
    }
	#headerleft{float:left;}
	#headerright{float:right;}
	
	#center{ 
	padding: 0 10px 0 20px;
	}
	.clearfloat { /* 此类应当放在 div 或 break 元素上，而且该元素应当是完全包含浮动的容器关闭之前的最后一个元素 */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }
	.ds{
	border-bottom:solid 1px #e7e7e7;
	border-right:solid 1px #e7e7e7;
	margin:3px 0 4px;
	margin-left:4px
	}
	.lsb{
	font:15px arial,sans-serif;
	border:none;
	color:#000;
	cursor:pointer;
	height:30px;
	margin:0;
	padding:0 6px;
	width:auto;
	overflow:visible;
	vertical-align:top
	}
	.lsb:active{background:#ccc}
</style>
<link href="../css/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.STYLE1 {font-size: 16px}
-->
</style></head>


<body>
<form id = "Ajax_Form">
<!-- <input type="button" id= "change" value="change!!" onclick = "clickme()" /> -->
</form>

<h2><p align="left">配方名 ：载体</p></h2>

        <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">第一页</li>
            <li class="TabbedPanelsTab" tabindex="0">第二页</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
            
            
            <table id = "t" cellspacing="0" cellpadding="0">
			<tr>
				<th width = 100 id = "title1">营养素</th>
				<th width = 100 id = "title2">强化剂</th>
				<th id = "title3">强化剂用量</th>
				<th id = "title4">强化剂比例</th>
				<th width = 50 id = "title5">删除</th>
			</tr>
			<tr id = "idtr001">
				<td id = "idtd001">
					<ul id="nav">
					<li><a href="#" id = "idtab001">试一试</a>
					<ul>
					<li><a id = "ida001" href="#" onClick = "setTableText(this)">哈哈</a></li>
					<li><a id = "ida002" href="#" onClick = "setTableText(this)">呵呵</a></li>
					<li><a id = "ida003" href="#" onClick = "setTableText(this)">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd002">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd003">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd004">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd005">
					<input type="button" id="imgBtn" value="添加" onClick="addRow()" />				
				</td>
			</tr>			
			<tr>
				<td>01</td>
				<td>11</td>
				<td>21</td>
				<td>Data</td>
				<td>
					<input type="button" id="imgBtn" value="删除" onClick="deleteRow()" />
				</td>
			</tr>			
			<tr>
				<td>02</td>
				<td>12</td>
				<td>22</td>
				<td>Data</td>
				<td>
					<input type="button" id="imgBtn" value="删除" onClick="deleteRow()" />
				</td>
			</tr>			
			<tr>
				<td>03</td>
				<td>13</td>
				<td>23</td>
				<td>Data</td>
				<td>
					<input type="button" id="imgBtn" value="删除" onClick="deleteRow()" />
				</td>
			</tr>																				
		</table>
            
            </div>
            <div class="TabbedPanelsContent">
            
            <table id = "t" cellspacing="0" cellpadding="0">
			<!-- 		    <tr>
				<th class = "title01"></th>
				<th class = "title01"></th>
				<th class = "title" id = "a">AAA</th>
				<th class = "title" id = "b">BBB</th>
				<th class = "title" id = "c">CCC</th>
			</tr>
			 -->
			<tr>
				<th width = 100 id = "title1">营养素</th>
				<th width = 100 id = "title2">强化剂</th>
				<th id = "title7">强化剂纯度</th>
				<th id = "title8">加工损失</th>
				<th id = "title9">强化剂单位</th>
				<th width = 50 id = "title10">删除</th>
			</tr>
			<tr id = "idtr002">
				<td id = "idtd006">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd007">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd008">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd009">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td id = "idtd010">
					<ul id="nav">
					<li><a href="#">试一试</a>
					<ul>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">呵呵</a></li>
					<li><a href="#">嘿嘿</a></li>
					</ul>
					</li>
				</td>
				<td>
					<input type="button" id="imgBtn" value="添加" onClick="addRow()" />
				</td>
			</tr>			
			<tr>
				<td>01</td>
				<td>11</td>
				<td>21</td>
				<td>Data</td>
				<td>Data</td>
				<td>
					<input type="button" id="imgBtn" value="删除" onClick="deleteRow()" />
				</td>
			</tr>			
			<tr>
				<td>02</td>
				<td>12</td>
				<td>22</td>
				<td>Data</td>
				<td>Data</td>
				<td>
					<input type="button" id="imgBtn" value="删除" onClick="deleteRow()" />
				</td>
			</tr>			
			<tr>
				<td>03</td>
				<td>13</td>
				<td>23</td>
				<td>Data</td>
				<td>Data</td>
				<td>
					<input type="button" id="imgBtn" value="删除" onClick="deleteRow()" />
				</td>
			</tr>
		</table>
            
            </div>
          </div>
        </div>
      <p>&nbsp;</p>
            
    <script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
-->
</script>
</body>
</html>
